<template>
  <div class="container">
    <div
        style="
        width: 380px;
        padding: 50px 30px;
        background-color: white;
        border-radius: 5px;
      "
    >
      <div
          style="
          text-align: center;
          font-size: 24px;
          margin-bottom: 30px;
          color: #333;
        "
      >
        云隙论坛
      </div>
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item prop="username">
          <el-input
              size="medium"
              prefix-icon="el-icon-user"
              placeholder="请输入账号"
              v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              size="medium"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="form.password"
              type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="role">
          <el-radio-group v-model="form.role">
            <el-radio label="ADMIN">管理员</el-radio>
            <el-radio label="USER">用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
              size="medium"
              style="
              width: 100%;
              background-color: #2a60c9;
              border-color: #2a60c9;
              color: white;
            "
              @click="login"
          >登 录</el-button
          >
        </el-form-item>
        <div style="display: flex; align-items: center">
          <div style="flex: 1"></div>
          <div style="flex: 1; text-align: right">
            还没有账号？请 <router-link to="/register">注册</router-link>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      form: { role: "ADMIN" },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //改
    login() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 根据角色选择不同的 API 端点
          const url =
              this.form.role === "ADMIN" ? "/api/emp/login" : "/api/user/login";
          // 根据角色构建不同的请求 payload
          const payload =
              this.form.role === "ADMIN"
                  ? {
                    empName: this.form.username,
                    empPassword: this.form.password,
                  }
                  : {
                    userName: this.form.username,
                    userPassword: this.form.password,
                  };
          axios
              .post(url, payload, {
                headers: {
                  "Content-Type": "application/json",
                },
              })
              .then((response) => {
                if (response.data.code === 20000) {
                  // 将令牌存储到 localStorage
                  localStorage.setItem("token", response.data.data);
                  this.$message.success("登录成功");
                  // 根据角色导航到不同的页面
                  if (this.form.role === "ADMIN") {
                    this.$router.push({ path: "/main" });
                  } else {
                    this.$router.push({ path: "/front" });
                  }
                } else {
                  this.$message.error(response.data.description);
                }
              })
              .catch((error) => {
                this.$message.error("登录失败：" + error.message);
              });
        } else {
          console.log("表单验证失败");
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-image: url("@/assets/images/bg.jpg");
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
a {
  color: #2a60c9;
}
</style>
